<template>
  <div class="page">
    <div class="card-titleinfo">
      <div class="card-left">
        <img :src="info.goodsImg" alt="" />
      </div>
      <div class="card-right">
        <div class="card-title">{{ info.goodsName }}</div>
        <div class="card-price">领取时间：{{ info.addTime }}</div>
      </div>
    </div>

    <div class="card-info" v-if="infoList.length > 0">
      <div class="title">卡劵信息</div>
      <div class="coupons">
        <div class="time">有效期至 {{ tiem }}</div>
        <div class="line"></div>
        <div v-for="(item, index) in infoList" :key="index">
          <div class="coupons-box-code" v-if="item.status == 0 && item.type == 4">
            <div class="copyState">
              <span class="fontSize">卡号:{{ cardSnList ? cardSnList[0] : '' }}</span>
              <div class="copyButton" @click="copyString(cardSnList[0])">复制</div>
            </div>
            <div class="copyState">
              <span class="fontSize">密码:{{ cardSnList ? cardSnList[1] : '' }}</span>
              <div class="copyButton" @click="copyString(cardSnList[1])">复制</div>
            </div>
          </div>

          <div class="coupons-box-code" v-if="item.status == 0 && item.type == 5">
            <div class="copyState" v-for="(item, index) in exchangeList" :key="index">
              <span class="fontSize">兑换码:{{ item }}</span>
              <div class="copyButton" @click="copyString(item)">复制</div>
            </div>
          </div>

          <div class="coupons-box-code" v-if="item.status == 0 && item.type == 1">
            <div class="copyState">
              <span class="fontSize">券码:{{ codeList ? codeList : '' }}</span>
              <div class="copyButton" bindtap="copy" @click="copyString(codeList)">复制</div>
            </div>
          </div>

          <div class="coupons-box-code" v-if="item.status == 0 && item.type == 2">
            <div class="useButton" @click="copyString(item.cardSn)">复制链接</div>
          </div>

          <div class="coupons-box-code" v-if="item.status == 0 && item.type == 92">
            <div class="useButton" @click="copyString(item.cardSn)">去使用</div>
          </div>

          <div class="coupons-box-code" v-if="item.status == 2">
            <div class="useButtonGQ">已过期</div>
          </div>

          <div class="coupons-box-code" v-if="item.status == 1">
            <div class="useButtonGQ">已使用</div>
          </div>
        </div>
      </div>

      <div class="codeClass" v-if="tkiShow">
        <img id="barcode" />
        <div class="codeStyle">{{ val }}</div>
      </div>

      <div class="codeClass" v-if="tkiTypeShow">
        <img id="barcode1" />
        <div class="codeStyle">卡号：{{ eightVal[0] }}</div>
      </div>

      <div class="codeClass" v-if="tkiTypeShow">
        <img id="barcode2" />
        <div class="codeStyle">密码：{{ eightVal[1] }}</div>
      </div>
    </div>

    <!-- <div class="order">
      <div class="title">订单信息</div>
      <div class="order-info">
        <div class="order-info-text">
          <div class="text">订单号：</div>
          {{ orderInfo.orderSn }}
          <div class="copyButton" @click="copyString(orderInfo.orderSn)">复制</div>
        </div>
        <div class="order-info-text">
          <div class="text">付款时间：</div>
          {{ orderInfo.payTime == '' || orderInfo.payTime == null ? '未付款' : orderInfo.payTime }}
        </div>
        <div class="order-info-text">
          <div class="text">订单总额：</div>
          <div class="price">¥ {{ orderInfo.orderPrice }}</div>
        </div>
        <div class="order-info-text">
          <div class="text">实际付款：</div>
          <div class="price">¥ {{ orderInfo.actualPrice }}</div>
        </div>
      </div>
    </div> -->

    <div class="order" v-if="info.goodsDesc !== ''">
      <div v-html="info.goodsDesc"></div>
    </div>
  </div>
</template>

<script>
  import {
    winningCardDetails
  } from '@/api/raffle.js'
  import QRCode from 'qrcodejs2'
  import JsBarcode from 'jsbarcode'
  import {
    Dialog
  } from 'vant'
  export default {
    data() {
      return {
        id: '',
        list: [],
        orderGoods: [],
        orderInfo: [],
        tiem: '',
        cardSn: [],
        infoList: [],
        cardSnList: [],
        exchangeList: [],
        codeList: [],
        val: [],
        tkiShow: false,
        tkiTypeShow: false,
        eightVal: '',
        goodsDesc: '',
        info: '',
        orderSn: ''
      }
    },
    mounted() {
      console.log('12',this.$route.query)
      this.orderSn = this.$route.query.orderSn
      this.init()
    },
    methods: {
      init() {
        winningCardDetails({
           orderSn: this.orderSn
        }).then(res => {
          this.info = res.data
          this.codeHandle(this.info)
        })
      },
      codeHandle(item) {
        this.infoList.push(item)
        console.log(this.infoList, '?')
        let tiem = this.infoList[0].expireTime.split(' ')[0]
        this.tiem = tiem
        for (let i = 0; i < this.infoList.length; i++) {
          if (this.infoList[i].status === 0 && this.infoList[i].type === 4) {
            this.cardSnList = this.infoList[i].cardSn.split(',')
          }
          if (this.infoList[i].status === 0 && this.infoList[i].type === 5) {
            this.exchangeList = this.infoList[i].cardSn.split(',')
            console.log(this.exchangeList)
          }
          if (this.infoList[i].status === 0 && this.infoList[i].type === 1) {
            this.codeList = this.infoList[i].cardSn
            console.log(this.codeList)
          }
          if (this.infoList[i].status === 0 && this.infoList[i].type === 7) {
            this.val = this.infoList[i].cardSn
            JsBarcode('#barcode', this.val, {
              format: 'CODE128',
              lineColor: '#000',
              background: '#F0F0F0',
              width: 2,
              height: 50,
              displayValue: false
            })
            this.tkiShow = true
          }
          if (this.infoList[i].status === 0 && this.infoList[i].type === 8) {
            console.log('类型8')
            this.tkiTypeShow = true
            let eightVal = this.infoList[i].cardSn.split(',')
            console.log(eightVal)
            this.eightVal = eightVal
            JsBarcode('#barcode1', this.eightVal[0], {
              format: 'CODE128',
              lineColor: '#000',
              background: '#F0F0F0',
              width: 2,
              height: 50,
              displayValue: false
            })
            JsBarcode('#barcode2', this.eightVal[1], {
              format: 'CODE128',
              lineColor: '#000',
              background: '#F0F0F0',
              width: 2,
              height: 50,
              displayValue: false
            })
            console.log(this.eightVal)
          }
        }
      },
      showToast(msg) {
        this.$toast({
          message: msg,
          position: 'center',
          duration: 2500
        })
      },
      copyString(param) {
        this.$copyText(param)
          .then(res => {
            this.showToast('复制成功！')
          })
          .catch(err => {
            this.showToast('复制失败！')
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .codeStyle {
    text-align: center;
    font-size: 14px;
    color: #333;
  }

  .codeClass {
    display: flex;
    flex-direction: column;
    margin: 10px 10px 0 10px;
  }

  .card-titleinfo {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 15px;
    margin: 10px;
    display: flex;

    .card-left {
      img {
        width: 70px;
        height: 70px;
      }
    }

    .card-right {
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      margin-left: 20px;

      .card-title {
        font-size: 14px;
        font-weight: bold;
      }

      .card-price {
        font-size: 14px;
        color: #f59e28;
      }
    }
  }

  .card-info {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 15px;
    margin: 10px;
    display: flex;
    flex-direction: column;

    .title {
      font-size: 14px;
      font-weight: bold;
    }

    .coupons {
      border: 2px solid #c0c0c0;
      padding: 10px 5px;
      border-radius: 10px;
      margin: 10px 0;

      .time {
        color: #999999;
        padding: 0 10px;
      }

      .line {
        margin-top: 10px;
        border: 1px dashed #c0c0c0;
      }
    }
  }

  .coupons-box-code {
    font-size: 14px;
    margin-top: 10px;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    font-weight: bold;
    color: #999999;
  }

  .copyState {
    display: flex;
    align-items: center;
  }

  .copyButton {
    padding: 3px;
    color: #fff;
    background-color: #4cd964;
    border-radius: 8px;
    letter-spacing: 1px;
    margin-left: 5px;
    font-size: 12px;
  }

  .order {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 15px;
    margin: 10px;
    display: flex;
    flex-direction: column;

    .title {
      font-size: 14px;
      font-weight: bold;
    }

    .order-info {
      margin-top: 5px;
    }

    .order-info-text {
      display: flex;
      align-items: center;
      padding: 5px 0;

      .text {
        width: 60px;
      }
    }
  }

  .useButtonGQ {
    margin-top: 8px;
    padding: 5px 9px;
    color: #fff;
    background-color: #999;
    border-radius: 8px;
    font-size: 12px;
    letter-spacing: 1px;
    text-align: center;
  }

  .useButton {
    margin-top: 8px;
    padding: 5px 9px;
    color: #fff;
    background-color: #f59e28;
    border-radius: 8px;
    font-size: 12px;
    letter-spacing: 1px;
    text-align: center;
  }

  .copyButton {
    padding: 2px 5px;
    color: #fff;
    background-color: #4cd964;
    border-radius: 8px;
    font-size: 12px;
    letter-spacing: 1px;
    margin-left: 5px;
  }

  .fontSize {
    font-size: 12px;
    display: flex;
    width: 200px;
  }
</style>
